<template>
	<view>
		<view>
			<view class="">
				<text style="font-size: 40rpx;margin-left: 30rpx;" :class="index==0?'active':''"
					@click="()=>{index=0}">活动</text>
				<text style="font-size: 40rpx;margin-left: 30rpx;" :class="index==1?'active':''"
					@click="()=>{index=1}">活动管理</text>
				<view class="box">
					<view class="box1" v-show="index==0">
						<view v-for="(item,index) in arr">
							<image :src="item.active_main_picture" mode="" class="img1"></image>
							<view style="display: flex;align-items: center;justify-content: space-between;">
								<text class="txt1">{{item.active_title}}</text>
								<button class="btn1" @click="()=>{
									xiangQing(active_id)
								}">报名</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="index==1">
			<view style="display: flex;justify-content: center;flex-wrap:wrap;">
				<view class="fabu" @click="fabu()">
					<text class="txt2">+</text>
					<view>
						<text class="txt3">发布活动</text>
					</view>
				</view>
				<view class="boxAll" style="display: flex;justify-content: space-between;"  v-for="(item,index) in arr">
					<view>
						<text style="font-size: 35rpx;margin-left: 30rpx;line-height: 120rpx;">{{item.active_title}}</text>
					</view>
					<view style="display: flex;align-items: center;">
						<button class="editBtn">编辑</button>
						<button class="delBtn" @click="()=>{
							deleteCampusActivites(item.active_id)
						}">删除</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active_id:0,
				index: 0,
				arr:[
				// 	{
				// 	"banner":"../../static/万圣节.jpeg",
				// 	"title":"校园万圣节舞会"
				// },
				// {
				// 	"banner":"../../static/test1.png",
				// 	"title":"棒球比赛"
				// },
				]
			};
		},
		methods: {
			findAllCampusActivites() {
				this.$http({
					url: "/activites/findAllCampusActivites",
					method: "get",
				}).then(res => {
					this.arr = res.data.data;
					// console.log(this.arr);
				})
			},
			deleteCampusActivites(active_id){
				this.$http({
					url: "/activites/deleteCampusActivites",
					method: "get",
					data:{
						active_id
					}
				}).then(res => {
					this.findAllCampusActivites()
				})
			},
			fabu() {
				uni.navigateTo({
					url: '../huodong/fabu'
				});
			},
			xiangQing(active_id){
				uni.navigateTo({
					url: '../huodong/xiangqing?active_id='+active_id
				});
			},
		},
		onLoad(){
			this.findAllCampusActivites()
		}
	}
</script>

<style scoped>
	.box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 15px;
	}

	.box1 {
		width: 700rpx;
		height: 420rpx;
		border-radius: 10px;
	}

	.img1 {
		width: 700rpx;
		height: 300rpx;
		border-radius: 10px 10px 0 0;
	}

	.active {
		font-size: 50rpx;
		font-weight: bold;
		border-bottom: 5rpx solid rgb(249, 204, 102);
	}

	.btn1 {
		border: none;
		background-color: #f9cc66;
		width: 170rpx;
		height: 60rpx;
		margin-right: 30rpx;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.txt1 {
		font-size: 30rpx;
		margin-left: 30rpx;
		display: flex;
		/* align-items: center; */
		line-height: 100rpx;
	}

	.txt2 {
		font-size: 45rpx;
	}

	.txt3 {
		font-size: 25rpx;
	}

	.fabu {
		width: 700rpx;
		height: 120rpx;
		background-color: #f9cc66;
		border-radius: 25rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.boxAll {
		width: 700rpx;
		height: 120rpx;
		background-color: #ffffff;
		border-radius: 25rpx;
		margin-top: 30rpx;
		/* border: 1px solid red; */
	}

	.editBtn {
		margin-right: 20rpx;
		border: none;
		font-size: 25rpx;
		background-color: #f9cc66;
		width: 110rpx;
		height: 40rpx;
		border-radius: 30rpx;
		line-height: 40rpx;
		justify-content: center;
	}

	.delBtn {
		display: flex;
		font-size: 25rpx;
		border: 1rpx solid red;
		color: red;
		background-color: #ffffff;
		width: 110rpx;
		height: 40rpx;
		border-radius: 30rpx;
		line-height: 38rpx;
		margin-right: 30rpx;
	}
</style>
